<template>
  <BasicModal
    :canFullscreen="false"
    @cancel="handleCancel"
    v-bind="$attrs"
    destroyOnClose
    @register="registerModal"
    title="流程表单权限设置"
    width="50%"
  >
    <div class="container">
      <HTabs :dataSource="clientList" @change="changeType" />
      <CommonConfig
        :isAction="false"
        v-show="activeType === CLIENT_TYPE_ENUM.PC"
        :columns="formSchema"
        :data="dataFieldFormList"
      />
      <CommonConfig
        :isAction="false"
        v-show="activeType === CLIENT_TYPE_ENUM.APP"
        :columns="formSchema"
        :data="appFieldFormList"
      />
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="EditModal">
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref, computed } from 'vue';
  import { cloneDeep } from 'lodash-es';
  import { HTabs } from '/@/components/HTabs';
  import { DICT } from '/@/enums/dict';
  import { CLIENT_TYPE_ENUM } from '/@/views/config-center/design-form-list/components/form-design/typings/form-type';

  import { getDictTypeListApi } from '/@/api/admin/dict';
  import { formSchema } from '../side.data';
  import CommonConfig from '/@/views/config-center/model-design/components/CommonConfig.vue';
  import modelerStore from '/@/store/modules/bpmnModeler';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const clientList = ref<any[]>([]);

  const modeler = modelerStore();
  const dataFieldFormList = ref([]);
  const appFieldFormList = ref([]);
  const activeType = ref(0);
  init();
  async function init() {
    const ret = await getDictTypeListApi({
      type: DICT.CLIENT_TYPE,
    });
    clientList.value = ret;
  }
  const nodeItem = computed(() => modeler.nodeItem);
  const [registerModal, { closeModal }] = useModalInner(async () => {
    console.log(
      '%c流程表单权限设置=====',
      'color:#2fa;font-size:30px;font-weight:bold',
      nodeItem.value,
    );
    // 表头
    const theaderList = modeler.getFieldFormList;
    // 权限
    const authList = nodeItem.value.fieldPerms;

    if (authList && authList.length > 0) {
      const PC = authList.filter((i) => i.client !== CLIENT_TYPE_ENUM.APP);
      const APP = authList.filter((i) => i.client === CLIENT_TYPE_ENUM.APP);
      dataFieldFormList.value = theaderList[0].map((i) => {
        PC.forEach((j) => {
          if (j.field === i.field) {
            i.updateType = j.updateType;
          }
        });
        return i;
      });
      appFieldFormList.value = theaderList[1].map((i) => {
        APP.forEach((j) => {
          if (j.field === i.field) {
            i.updateType = j.updateType;
          }
        });
        return i;
      });
      // dataFieldFormList.value = cloneDeep(
      //   modeler.nodeItem?.fieldPerms.filter((el) => el.client !== CLIENT_TYPE_ENUM.APP),
      // );
      // appFieldFormList.value = cloneDeep(
      //   modeler.nodeItem?.fieldPerms.filter((el) => el.client === CLIENT_TYPE_ENUM.APP),
      // );
    } else {
      dataFieldFormList.value = cloneDeep(modeler.getFieldFormList[0]);
      appFieldFormList.value = cloneDeep(modeler.getFieldFormList[1]);
    }
  });

  function changeType(v) {
    activeType.value = v.intValue;
  }

  function handleCancel() {
    closeModal();
  }

  function handleSubmit() {
    const arr = dataFieldFormList.value.map((i: any) => ({
      label: i.label,
      field: i.field,
      updateType: i.updateType,
      client: CLIENT_TYPE_ENUM.PC,
    }));
    const appList = appFieldFormList.value.map((i: any) => ({
      label: i.label,
      field: i.field,
      updateType: i.updateType,
      client: CLIENT_TYPE_ENUM.APP,
    }));

    const ret = arr.concat(appList);

    modeler.setActivitiesItem(modeler.getActiveId, 'fieldPerms', ret);
    handleCancel();
    createMessage.success('保存成功');
  }
</script>
<style lang="less" scoped></style>
